<template>
  <div>
    <!--  分割线-->
    <el-divider></el-divider>
    <!--  卡片化的标签页-->
    <el-tabs type="border-card" v-model="activeName">
      <el-tab-pane label="案件归档" name="anjianguidang" >
        <span style="font-weight:bold;"><span style="color:royalblue">|</span>&nbsp;案件归档</span>
        <!--  分割线-->
        <el-divider></el-divider>
        <!--      点击案件输入框打开查询案件表格-->
        <el-dialog title="案件选择" style="width: 1800px" :visible.sync="dialogTableVisible">
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item>
              <el-input v-model="formInline.values"></el-input>
            </el-form-item>
            <el-form-item>
              <el-select v-model="formInline.options" placeholder="--请选择搜索对象--">
                <el-option label="--请选择搜索对象--" value="-1"></el-option>
                <el-option label="委托人" value="caseWtr"></el-option>
                <el-option label="对方当事人" value="caseOppositeParties"></el-option>
                <el-option label="承办律师" value="caseAttorney"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="getCaseLaw">查询</el-button>
            </el-form-item>
          </el-form>
          <el-table :data="caseLawData"
                    border
                    ref="multipleTable"
                    @select-all="selectAll"
                    @select="select"
                    @selection-change="handleSelectionChange">
            <el-table-column
                type="selection"
                width="55"
                align="center">
            </el-table-column>
            <el-table-column property="caseNo" label="案号"></el-table-column>
            <el-table-column property="caseWtr" label="委托人"></el-table-column>
            <el-table-column property="caseOppositeParties" label="对方当事人"></el-table-column>
            <el-table-column property="casePaidsal" label="已付金额"></el-table-column>
            <el-table-column property="caseInvoiced" label="已开票金额"></el-table-column>
            <el-table-column property="caseAttorney" label="承办律师"></el-table-column>
            <el-table-column property="collectionTime" label="收案时间"></el-table-column>
          </el-table>
          <!--    分页-->
          <el-pagination
              background
              layout="total, sizes, prev, pager, next"
              :page-sizes="[2, 4, 6, 8]"
              :total="pageData.total"
              :page-size="formInline.pageNum"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange">
          </el-pagination>
        </el-dialog>
        <!--      点击添加文件夹按钮打开添加文件夹对话框-->
        <el-dialog title="添加文件夹" :visible.sync="dialogFormVisible">
          <el-tabs type="card">
            <el-tab-pane label="添加/编辑">
              <!--垂直分割-->
              <span style="font-weight:bold"><span style="color:royalblue">|</span>&nbsp;日志编辑</span>
              <!--  分割线-->
              <el-divider></el-divider>
              <el-form :label-position="labelPosition" :rules="rules" :model="addForm">
                <el-form-item label="文件夹名称:" prop="folderName">
                  <el-input style="width: 50%" v-model="addForm.folderName"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button @click="dialogFormVisible = false">取 消</el-button>
                  <el-button type="primary" @click="addRecordFolder">确 定</el-button>
                </el-form-item>
              </el-form>
            </el-tab-pane>
          </el-tabs>
        </el-dialog>
        <!--      案件归档表单-->
        <el-form :label-position="labelPosition" :rules="rules" :model="caseLawForm">
          <el-input type="hidden" v-model="caseLawForm.caseLawId"></el-input>
          <el-form-item label="案件:" prop="caseNo">
            <el-input style="width: 50%" v-model="caseLawForm.caseNo" @click.native="dialogTableVisible = true"
                      suffix-icon="el-icon-edit-outline"></el-input>
          </el-form-item>
          <el-form-item label="文件夹:" prop="folderId">
            <el-select style="width: 43%" v-model="caseLawForm.folderId" placeholder="请选择活动区域">
              <el-option label="--请选择文件夹--" value="-1"></el-option>
              <el-option
                  v-for="item in folderData"
                  :key="item.id"
                  :label="item.folderName"
                  :value="item.id">
              </el-option>
            </el-select>
            <el-button type="primary" plain @click="dialogFormVisible = true">添加文件夹<i
                class="el-icon-edit el-icon--right"></i></el-button>
            <el-alert
                title="文件夹可在“系统管理->系统配置->案件归档文件夹”中进行设置"
                type="text"
                show-icon
                :closable="false">
            </el-alert>
          </el-form-item>
          <el-form-item label="相关文件:">
            <!--         before-upload上传文件之前的钩子，参数为上传的文件，-->
            <el-upload
                style="height: 10px"
                ref="upload"
                action=""
                :http-request="httpRequest"
                :before-upload="beforeUpload"
                :limit=1>
              <el-button size="small" type="primary" plain>点击上传</el-button>
            </el-upload>
          </el-form-item>
          <div style="height: 50px"></div>
          <el-form-item>
            <el-button type="primary" plain @click="insert0rUpdateDoc">上传</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="我的电子文档" name="wodedianziwendang">
        <el-form :inline="true" :model="docFormInline" class="demo-form-inline">
          <el-form-item>
            <el-input v-model="docFormInline.docValues"></el-input>
          </el-form-item>
          <el-form-item>
            <el-select clearable v-model="docFormInline.docOptions" placeholder="--请选择搜索对象--">
              <el-option label="上传人" value="userName"></el-option>
              <el-option label="所属文件夹" value="folderName"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" plain @click="getRecordDocumentName">查询</el-button>
          </el-form-item>
        </el-form>
        <el-table
            :data="RecordDocumentData"
            style="width: 100%">
          <el-table-column
              prop="caseNo"
              label="案号">
          </el-table-column>
          <el-table-column
              prop="folderName"
              label="所属文件夹">
          </el-table-column>
          <el-table-column
              prop="userName"
              label="上传人">
          </el-table-column>
          <el-table-column
              prop="upddate"
              :formatter="dateFun"
              label="更改日期">
          </el-table-column>
          <el-table-column
              label="操作">
            <template slot-scope="scope">
              <el-dropdown trigger="click">
                <el-button type="primary" plain>
                  操作<i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item @click.native="selectRecordDoc(scope.row)">下载</el-dropdown-item>
                  <el-dropdown-item @click.native="updateRecordDoc(scope.row.id)">修改</el-dropdown-item>
                  <el-dropdown-item @click.native="deleteRecordDoc(scope.row.id)">删除</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>
        </el-table>
        <!--    分页-->
        <el-pagination
            background
            layout="total, sizes, prev, pager, next"
            :page-sizes="[2, 4, 6, 8]"
            :total="pageDataDoc.total"
            :page-size="docFormInline.pageNum"
            @size-change="docHandleSizeChange"
            @current-change="docHandleCurrentChange">
        </el-pagination>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  name: "RecordDocument.vue",
  data() {
    return {
      id:this.$route.params.id,//获取ID
      activeName:"anjianguidang",//默认显示案件归档标签页
      dialogTableVisible: false,//查询案件表格对话框默认关闭
      dialogFormVisible: false,//添加文件夹对话框默认关闭
      labelPosition: 'top',//表单顶部对齐
      pageData: {},// 存储返回的分页数据
      pageDataDoc:{},
      caseLawData: [],//查询案件表格返回的数据
      RecordDocumentData: [],//查询我的电子文档表格
      folderData: [],//文件夹下拉框数据
      //添加文件夹表单
      addForm: {},
      //高级查询我的电子归档
      docFormInline: {
        systemUserId:JSON.parse(localStorage["user"])[0].id,//当前登录者
        docValues: '',
        docOptions: '',
        pageId: 1,
        pageNum: 2,
        "chaxun": "1",
      },
      //高级查询案件表单
      formInline: {
        values: '',//输入框多值
        options: '',//下拉框取值
        pageId: 1,
        pageNum: 2,
        "chaxun": "1",
      },
      //案件归档表单
      caseLawForm: {
        caseLawId:'',
        caseNo: '',
        flie: '',//选择文件
        flieName: '',//文件名称
        documentFile: '',// 文件上传地址
        upddate:'',//当前时间
        systemUserId:JSON.parse(localStorage["user"])[0].id,//当前登录者
      },
      //小红星表单验证规则
      rules: {
        caseNo: [
          {required: true, message: '请输入案件名称', trigger: 'change'}
        ],
        folderId: [
          {required: true, message: '请选择文件夹', trigger: 'change'}
        ],
        folderName: [
          {required: true, message: '请输入案件名称', trigger: 'blur'}
        ]
      },

    }
  },
  created() {
    this.getCaseLaw()
    this.getRecordFolder()
    this.getRecordDocumentName()
  },
  methods: {
    //上传
    insert0rUpdateDoc() {
      if (this.caseLawForm.id==null){
        this.caseLawForm.upddate = this.$date.formatDate(new Date(),'yyyy-MM-DD hh:mm:ss'); //当前时间
        let formatData=new FormData(); // 点击添加按钮先上传文件 成功回调获取文件地址并添加到表
        formatData.append('file',this.caseLawForm.flie,this.caseLawForm.fileName)
        let requestConfig={
          headers:{
            'Content-Type':'multipart/form-data'
          }
        }
        this.$http.post("file", formatData,requestConfig)
            .then(res => {
              this.caseLawForm.documentFile = res.data.data

              this.$http.post('recordDocument', this.caseLawForm)
                  .then(() => {
                        this.$notify({
                          type: "success",
                          message: "添加成功"
                        }),
                            this.activeName="wodedianziwendang"
                            this.getRecordDocumentName()
                  })
                  .catch(function (error) {
                    console.log(error);
                  });
            })
            .catch(function (error) {
              console.log(error);
            });
      }else {
        this.caseLawForm.upddate = this.$date.formatDate(new Date(),'yyyy-MM-DD hh:mm:ss'); //当前时间
        this.$http.put(`recordDocument`,this.caseLawForm)
            .then(() => {
          this.$notify({
            type:"success",
            message:"修改成功"
          }),
              this.activeName="wodedianziwendang"
              this.getRecordDocumentName()
        })
            .catch(function (error) {
              console.log(error);
            });
      }
    },
    //上传文件之前的钩子
    beforeUpload(file) {
      this.caseLawForm.flie = file;
      this.caseLawForm.flieName = file.name;
    },
    //带Id跳转修改页面
    updateRecordDoc(id){
      this.activeName="anjianguidang";
      this.getRecordDocumentId(id);
    },
    //下载
    selectRecordDoc(row){
      document.location.href=row.documentFile
    },
    //删除
    deleteRecordDoc(id){
      this.$http.delete(`recordDocument/${id}`)
          .then(
              this.$notify({
                type:"error",
                message:"删除成功"
              }),
              this.getRecordDocumentName()
          )
          .catch(function (error) {
            console.log(error);
          });
    },
    //根据ID查询我的电子文档
    getRecordDocumentId(id){
      this.$http
          .get(`recordDocument/${id}`)
          .then((res) => {
            this.caseLawForm = res.data.data[0];
          })
          .catch(function (error) {
            console.log(error);
          });
    },
    //查询我的电子文档
    getRecordDocumentName() {
      this.$http.get('recordDocument', {params: this.docFormInline})
          .then((res) => {
            this.RecordDocumentData = res.data.data.list;//查询出来的数据
            this.pageDataDoc = res.data.data; // 返回的分页参数   pageinit
          })
          .catch(function (error) {
            console.log(error);
          });
    },
    //添加文件夹
    addRecordFolder() {
      this.$http.post('recordFolder', this.addForm)
          .then(
              this.$message({
                type: "success",
                message: "添加成功"
              }),
              this.dialogFormVisible=false,
              this.getRecordDocumentName()
          )
          .catch(function (error) {
            console.log(error);
          });
    },
    //查询文件夹下拉框
    getRecordFolder() {
      this.$http.get('recordFolder')
          .then((res) => {
            this.folderData = res.data.data;//查询出来的数据
          })
          .catch(function (error) {
            console.log(error);
          });
    },
    //高级查询案件表
    getCaseLaw() {
      this.$http.get('caseLaw', {params: this.formInline})
          .then((res) => {
            this.caseLawData = res.data.data.list;//查询出来的数据
            this.pageData = res.data.data; // 返回的分页参数   pageinit
          })
          .catch(function (error) {
            console.log(error);
          });
    },
    //页面显示文件上传数据
    httpRequest() {

    },
    //表格中复选框只能选中一个
    select(selection) {
      if (selection.length > 1) {
        let del_row = selection.shift()
        this.$refs.multipleTable.toggleRowSelection(del_row, false)
      }
    },
    selectAll(selection) {
      if (selection.length > 1) {
        selection.length = 1
      }
    },
    //点击复选框获取选中的客户数据
    handleSelectionChange(sels) {
      console.log(sels)
      this.caseLawForm.caseNo = sels[0].caseNo;
      this.caseLawForm.caseLawId = sels[0].id;
      this.dialogTableVisible = false;
    },
    //显示几页
    handleSizeChange(val) {
      this.formInline.pageNum = val;
      this.getCaseLaw();
    },
    docHandleSizeChange(val) {
      this.docFormInline.pageNum = val;
      this.getRecordDocumentName();
    },
    //每页显示几条
    handleCurrentChange(val) {
      this.formInline.pageId = val;
      this.getCaseLaw();
    },
    docHandleCurrentChange(val) {
      this.docFormInline.pageId = val;
      this.getRecordDocumentName();
    },
    //获取当前时间
    dateFun(row){
      return this.$date.formatDate(new Date(row.upddate),'yyyy-MM-DD hh:mm:ss');

    },
  }
}
</script>

<style scoped>

</style>